<template>
  <el-container v-loading="loading">

    <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="120px" label-position="left"
             class="demo-ruleForm" size="small">
			<el-form-item label="计费规则选择">
				<el-radio-group v-model="ruleForm.type">
					<el-radio label="1">规则1</el-radio>
					<el-radio label="2">规则2</el-radio>
				</el-radio-group>
			</el-form-item>
			<div v-if="ruleForm.type == 2" style="width: 900px;">
				<el-form-item label="">
					<el-button type="primary" style='width: 100%;' @click='add' icon='el-icon-plus'>增加时间计费规则</el-button>
				</el-form-item>
				<el-form-item label="时间运费模板" v-if="ruleForm.drive_one.during_time.length > 0">
					<el-col :span="24" v-for='(item,index) in ruleForm.drive_one.during_time' class='row-col'>
						<span class="close" @click="del(index)"><i class="el-icon-circle-close-outline"></i></span>
						<el-col :span="24">计费时段:</el-col>
						<el-col :span="24" class='t_flex'>
							<el-time-select placeholder="起始时间" v-model="item.arr[0]"
									:picker-options="{
										start: '00:00',
										step: '00:10',
										end: '24:00'
									}">
								</el-time-select>
								<span>至</span>
								<el-time-select placeholder="起始时间" v-model="item.arr[1]"
										:picker-options="{
											start: '00:00',
											step: '00:10',
											end: '24:00'
										}">
									</el-time-select>
						</el-col>
						<el-col :span="24">返程费:</el-col>
						<el-col :span="12">
							<el-input v-model="item.dis.return_fees" max='100' min='0' maxlength='2' minlength='1' type='number'>
							  <template slot="append">%</template>
							</el-input>
							<div class="form-item-tip">
							  <span>提示：返程费是超出规定公里后，所占总金额的百分比。</span>
							</div>
						</el-col>
						<el-col :span="24">计费规则:</el-col>
						<!-- <el-col :span="24" class='block'>
							<div>起步里程</div><input type="text" v-model='item.dis.starfom' />
							<div>起步价格</div><input type="text" v-model='item.dis.price' />
							<div>增加里程数费用</div><input type="text" v-model='item.dis.incr' />
						</el-col> -->
						<el-col :span="6">
							<el-input placeholder="" v-model='item.dis.starfom'><template slot="prepend">起步</template></el-input>
						</el-col>
						<el-col :span="6">
							<el-input placeholder="" v-model='item.dis.price'><template slot="prepend">km以内</template></el-input>
						</el-col>
						<el-col :span="6">
							<el-input placeholder="" v-model='item.dis.incr'><template slot="prepend">元,每增</template></el-input>
						</el-col>
						<el-col :span="6">
							<el-input placeholder="" v-model='item.dis.renewal'><template slot="prepend">km加</template><template slot="append">元</template></el-input>
						</el-col>
						<el-col :span="8">
							<el-input placeholder="" v-model='item.dis.outrange' v-on:blur='al(index)'><template slot="prepend">超出</template></el-input>
						</el-col>
						<el-col :span="8">
							<el-input placeholder="" v-model='item.dis.outincr'><template slot="prepend">km后,每增</template></el-input>
						</el-col>
						<el-col :span="8">
							<el-input placeholder="" v-model='item.dis.outrenewal'><template slot="prepend">km加</template><template slot="append">元</template></el-input>
						</el-col>
						<el-col :span="8">
							<el-input placeholder="" v-model='item.dis.period'><template slot="prepend">等待时间</template></el-input>
						</el-col>
						<el-col :span="8">
							<el-input placeholder="" v-model='item.dis.timeout'><template slot="prepend">分钟后,每超</template></el-input>
						</el-col>
						<el-col :span="8">
							<el-input placeholder="" v-model='item.dis.timeout_renewal'><template slot="prepend">分钟加</template><template slot="append">元</template></el-input>
						</el-col>
					</el-col>
				</el-form-item>
			</div>
			<div v-if="ruleForm.type == 1">
			<el-row>
				<h4>距离计费</h4>
				<hr>
			</el-row>
      <el-form-item label="起步里程">
        <el-input v-model="ruleForm.drive.dis.starfom">
          <template slot="append">km</template>
        </el-input>
      </el-form-item>

      <el-form-item label="起步价格">
        <el-input v-model="ruleForm.drive.dis.price">
          <template slot="append">元</template>
        </el-input>
      </el-form-item>

      <el-form-item label="增加里程">
        <el-input v-model="ruleForm.drive.dis.incr">
          <template slot="append">km</template>
        </el-input>
      </el-form-item>

      <el-form-item label="续费">
        <el-input v-model="ruleForm.drive.dis.renewal">
          <template slot="append">元</template>
        </el-input>
      </el-form-item>

      <el-form-item label="起步时间">
        <el-input v-model="ruleForm.drive.dis.period">
          <template slot="append">小时</template>
        </el-input>
      </el-form-item>

      <el-form-item label="超出时间">
        <el-input v-model="ruleForm.drive.dis.timeout">
          <template slot="append">小时</template>
        </el-input>
      </el-form-item>

      <el-form-item label="超时续费">
        <el-input v-model="ruleForm.drive.dis.timeout_renewal">
          <template slot="append">小时/元</template>
        </el-input>
      </el-form-item>
			<el-row>
				<h4>时间计费</h4>
				<hr>
			</el-row>

			<el-form-item label="配送时间段">
				<el-col span="20">
					<el-input v-model="ruleForm.drive.during">
						<template slot="prepend">间隔</template>
						<template slot="append">分钟</template>
					</el-input>
				</el-col>
				<el-col span="4">
					<el-button type="primary" @click="runnerByCreateTime">生成配送时间段</el-button>
				</el-col>
			</el-form-item>
			<el-form-item label="时间运费模板" v-if="ruleForm.drive.during_time.length > 0">
				<el-col span="12" class="row-col" v-for="timedItem in ruleForm.drive.during_time">
					<el-col span="12">
						<el-input v-model="timedItem.timed" readonly="true">
							<template slot="append">附加费</template>
						</el-input>
					</el-col>
					<el-col span="7">
						<el-input v-model="timedItem.price">
							<template slot="append">元</template>
						</el-input>
					</el-col>
					<el-col span="4">
						<el-button type="success" v-if="timedItem.enable == 1" @click="changeEnable({currentIten:timedItem})">使用中
						</el-button>
						<el-button type="info" v-if="timedItem.enable == 0" @click="changeEnable({currentIten:timedItem})">已废弃
						</el-button>
					</el-col>
				</el-col>
			</el-form-item>
			</div>
      <el-form-item>
        <el-button type="primary" @click="submitForm('ruleForm')">立即保存</el-button>
      </el-form-item>
    </el-form>
  </el-container>
</template>

<script>
  export default {
    mounted() {
      let _this = this;
      this.api.getPlatformPriceSetting().then(function (res) {
        if (res.code == 1) {
					var data = res.data;
					data.drive_one.during_time.forEach((item,i)=>{
						item.arr = item.timed.split('|');
						item.dis.return_fees = item.dis.return_fee * 100
					})
					console.log(data)
          _this.ruleForm = res.data;
        }
        _this.loading = false;
      }).catch(function (error) {
        throw new Error(error);
      });
    },
    methods: {
      goBack: function () {
        this.$router.go(-1)
      },
			al:function(i){
				let that = this;
				var data = that.ruleForm.drive_one.during_time;
				console.log(data)
				if(Number(data[i].dis.outrange) <= Number(data[i].dis.incr)){
					data[i].dis.outrange = '';
					  that.$message({
					  showClose: true,
					  message: '超出千米数必须大于每增千米数',
					  type: 'warning'
					});
				}
				console.log(i)
			},
			//添加
			add:function(){
				let that = this;
				var data = {
					timed:'',enable:'',arr:[],
					dis:{starfom:'',price:'',incr:'',renewal:'',outrange:'',outincr:'',outrenewal:'',period:'',timeout:'',timeout_renewal:''}
				}
				that.ruleForm.drive_one.during_time.push(data)
			},
			//删除
			del:function(i){
				let that = this;
				that.ruleForm.drive_one.during_time.splice(i,1)
			},
      submitForm(formName) {
        let _this = this;
        this.$refs[formName].validate((valid) => {
          if (valid) {
						var data = _this.ruleForm;
						data.drive_one.during_time.forEach((item,i)=>{
							item.timed = item.arr[0] + '|' + item.arr[1];
							console.log(Number(item.dis.return_fee))
							item.dis.return_fee = Number(item.dis.return_fees) / 100
						})
						console.log(data)
						//return false;
// 						{
// 						  id: _this.ruleForm.id,
// 						  store_id: _this.ruleForm.store_id,
// 						  key: _this.ruleForm.key,
// 						  dis: _this.ruleForm.drive.dis,
// 							during:_this.ruleForm.drive.during,
// 							during_time:_this.ruleForm.drive.during_time,
// 							type:_this.ruleForm.type
// 						}
            _this.api.setPlatformPriceSetting(data).then(function (res) {
              if (res.code == 1) {
                _this.$message({
                  showClose: true,
                  message: res.msg,
                  type: 'success',
                });
              } else {
                _this.$message({
                  showClose: true,
                  message: res.msg,
                  type: 'warning'
                });
              }
            }).catch(function (error) {
              throw new Error(error);
            });
          } else {
            return false;
          }
        });
      },
      changeEnable({currentIten: timedItem}) {
        timedItem.enable = timedItem.enable == 1 ? 0 : 1;
      },
			//创建时间段
			getGoodsCreateTime: function () {
				let during = this.ruleForm.get_goods.during;
				if (!during) {
					this.$message({
						showClose: true,
						message: '分钟数不得为空',
						type: 'warning'
					});
					return false;
				}
				this.ruleForm.get_goods.during_time = this.createTimed({during: during});
			},
			//创建时间
			runnerByCreateTime: function () {
				let during = this.ruleForm.drive.during;
				if (!during) {
					this.$message({
						showClose: true,
						message: '分钟数不得为空',
						type: 'warning'
					});
					return false;
				}
				this.ruleForm.drive.during_time = this.createTimed({during: during});
			},
			createTimed: function ({during: during}) {  // 生成定时时间
				let currentDataTime = 86400;
				let spacingInterval = during * 60;
				let maxSize = Math.ceil(currentDataTime / spacingInterval);
				let current = 0, next = 0, currentTemp = {}, nextTemp = {}, currentTimed, timedGroup = [];
				for (let i = 0; i < maxSize; i++) {
					current = i * spacingInterval;
					next = (i + 1) * spacingInterval;

					// currentTemp
					currentTemp.hour = Math.floor(current / 3600);
					if (current % 3600 == 0) {
						currentTemp.minute = 0;
					} else {
						currentTemp.minute = current % 3600 / 60;
					}
					if (currentTemp.hour >= 24) {
						currentTemp.hour = 0;
					}

					// nextTemp
					nextTemp.hour = Math.floor(next / 3600);
					if (next % 3600 == 0) {
						nextTemp.minute = 0;
					} else {
						nextTemp.minute = next % 3600 / 60;
					}
					if (nextTemp.hour >= 24) {
						nextTemp.hour = 0;
						nextTemp.minute = 0;
					}

					currentTimed = (currentTemp.hour < 10 ? '0' + currentTemp.hour : currentTemp.hour) + ':' + (currentTemp.minute < 10 ? '0' + currentTemp.minute : currentTemp.minute)
						+ '|' +
						(nextTemp.hour < 10 ? '0' + nextTemp.hour : nextTemp.hour) + ':' + (nextTemp.minute < 10 ? '0' + nextTemp.minute : nextTemp.minute);
					timedGroup.push({
						timed: currentTimed,
						price: 0,
						enable: 1
					})
				}
				return timedGroup;
			},
    },
    data() {
      return {
        loading: true,  // 页面加载
        currentOption: '1',
        ruleForm: {
          id: null,
          store_id: null,
          key: "driving",
          drive: {
            dis: {
              starfom: '',
              price: '',
              incr: '',
              renewal: '',
              period: '',
              timeout: '',
              timeout_renewal: ''
            }
          },
					type:''
        },
        rules: {},
				purchase:{
					during:"60",type:'1',
					during_time:[
						{timed: "00:00|01:00", price: "0", enable: "true"},
						{timed: "00:00|01:00", price: "0", enable: "true"}
					]
				}
      }
    },
  }
</script>

<style scoped>
  .el-container {
    display: block;
  }

  .el-form {
    width: 1000px;
    margin: 15px 0 15px 30px;
  }

  .row-col {
    margin-bottom: 15px;position: relative;
  }
	.row-col .close{position: absolute;top:0;right: 0;}
	.t_flex{display: flex;}
	.t_flex div{flex: 1;}
	.t_flex span{width: 50px;text-align: center;}
	.block{display: flex;border: 1px solid #dcdfe6;border-radius:4px ;}
	.block div{flex: 1;padding: 0 10px;border-right:1px solid #dcdfe6;text-align: center;overflow: hidden;width: auto;}
	.block input{width: 100px;border-color:transparent;padding: 0 10px;border-right:1px solid #dcdfe6;outline:none;height: 32px;}
	.block input:last-child{border-color:transparent;}
	.block input:focus{border: 1px solid #66b1ff;}
</style>
